<script setup lang="ts">
import * as utils from "@/utils/utils";
import btn from "@/utils/buttonInterface";

let symMapping: Map<string, string>;

const selectedOption = ref<string>("true");
// 显示切换按钮
const showSwitchBtn = ref<boolean>(false);
// loading flag
const loading = ref<boolean>(false);
// response data
const showData = ref<showDataImpl[]>([]);
// input的输入值
const inputValue = ref<string>("");

interface showDataImpl {
  name: string;
  values: string[];
}
interface response {
  fragment: string[];
  texture: string[];
  textureMod: string[];
}

interface response2 {
  fragment: string[];
  texture: string[];
  textureMod: string[];
}

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
function formatResponse(res: object) {
  // init showData
  showData.value = [];
  for (const key in res) {
    let temp: showDataImpl = {
      name: symMapping.get(key) ?? key,
      values: (res as any)[key],
    };
    showData.value.push(temp);
  }
}

const getAddrTexture = async () => {
  if (utils.Str_isEmpty(inputValue.value)) return;
  // 开启等待
  loading.value = true;
  try {
    let texture_promise = await btn.ent.getEntTexture(inputValue.value);
    const res: response = texture_promise["data"];
    formatResponse(res);
    await sleep(100);
    // 拿到数据关闭等待
    loading.value = false;
  } catch (e) {
    showData.value = [];
    loading.value = false;
    console.log(e);
  }
};

const getScanRes = async () => {
  if (utils.Str_isEmpty(inputValue.value)) return;
  // 开启等待
  loading.value = true;
  try {
    let scanRes: response2 = await btn.ent.getScanRes(inputValue.value);
    formatResponse(scanRes);
    await sleep(100);
    // 拿到数据关闭等待
    loading.value = false;
  } catch (e) {
    showData.value = [];
    loading.value = false;
    console.log(e);
  }
};

function openHandler() {
  showSwitchBtn.value = true;
}

function closeHandler() {
  showSwitchBtn.value = false;
}

// 根据选择重新计算颜色
let showColor = computed(() => {
  showData.value = [];
  return selectedOption.value == "true"
    ? "rgb(198, 198, 198)"
    : "rgb(33,150,243)";
});

// 监听input的值是否和response的值对齐
watch(
  () => inputValue,
  (newFlag) => {
    if (newFlag.value === "") showData.value = [];
  },
  { deep: true }
);

// 组件挂载成功
onMounted(() => {
  symMapping = new Map();
  symMapping.set("fragment", "解析碎片");
  symMapping.set("texture", "解析纹理");
  symMapping.set("categories", "纹理调整");
});

// 组件卸载时
onUnmounted(() => {
  symMapping.clear();
});
</script>

<template>
  <!-- v-on="$attrs" 没有 为什么也可以 传自定义事件？ -->
  <div class="SrchEntTCard_1">
    <transition name="fade">
      <SwitchBtn1
        v-if="showSwitchBtn"
        class="SrchEntTCard_2"
        v-model="selectedOption"
        :MainColor="showColor"
        :Sbtn1Names="{ name1: '词库纹理', name2: '词库扫描' }"
      />
    </transition>
    <SkewXCard
      v-on="$attrs"
      v-bind="$attrs"
      :loading="loading"
      :show-data="showData"
      :enter-event="getAddrTexture"
      :MainColor="showColor"
      :in2MainColor="showColor"
      v-model:model-value="inputValue"
      v-if="selectedOption == 'true'"
      @isCardOpen="openHandler"
      @isCardClose="closeHandler"
    />
    <SkewXCard
      v-on="$attrs"
      v-bind="$attrs"
      :loading="loading"
      :show-data="showData"
      :enter-event="getScanRes"
      :MainColor="showColor"
      :in2MainColor="showColor"
      v-model:model-value="inputValue"
      v-if="selectedOption != 'true'"
      @isCardOpen="openHandler"
      @isCardClose="closeHandler"
    />
  </div>
</template>

<style scoped>
.SrchEntTCard_1 {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.SrchEntTCard_2 {
  left: 250px;
  top: 0;
  z-index: 3;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
  transition-delay: 500ms;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
